<template>
  <div>
    <!-- 头 -->
    <userTitel :title="title"></userTitel>
    <!-- 卡片1 -->
    <el-card shadow="never">
      <el-form :inline="true">
        <el-form-item label="快递员账号">
          <el-input
            v-model="formObj.account"
            style="width: 390px; margin-right: 60px"
            placeholder="请输入快递员账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递员姓名">
          <el-input
            v-model="formObj.name"
            style="width: 390px; margin-right: 60px"
            placeholder="请输入快递员姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="快递员手机号">
          <el-input
            v-model="formObj.mobile"
            style="width: 390px"
            placeholder="请输入快递员手机号"
          ></el-input>
        </el-form-item>
        <br />
        <el-form-item label="所属机构 :">
          <el-select
            @clear="handleClear"
            v-model="formObj.agency.name"
            style="width: 390px"
            placeholder="请选择所属机构"
          >
            <el-option
              hidden
              :value="formObj.agency.name"
              :label="formObj.agency.name"
            >
            </el-option>
            <el-tree
              :data="data"
              :props="defaultProps"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              @node-click="handleNodeClickOne"
            ></el-tree>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 60px">
          <el-button type="primary" @click="so">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 卡片2 -->
    <el-card shadow="never" style="margin-top: 20px">
      <el-table border :data="formData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="account" label="快递员账号"> </el-table-column>
        <el-table-column prop="name" label="快递员姓名"> </el-table-column>
        <el-table-column prop="mobile" label="快递员手机号"> </el-table-column>
        <el-table-column prop="agency.name" label="所属机构"> </el-table-column>
        <!-- 0休息1上班 -->
        <el-table-column label="工作状态">
          <template #default="{ row }">
            <span
              :class="{ gree: row.workStatus === 1, red: row.workStatus === 0 }"
            ></span>
            <span>{{ row.workStatus ? "上班" : "休息" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-link
              @click="scope(row)"
              :underline="false"
              style="color: #6b9eff"
              >作业范围分配</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+counts"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getList, getUserList } from "@/api/operational-range";
export default {
  name: "operational-range",
  data() {
    return {
      title: "快递员管理",
      // 列表渲染
      formData: [{}],
      // 树形
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 双向绑定
      formObj: {
        account: "", //快递员账号
        name: "", //快递员姓名
        mobile: "", //快递员手机号
        agency: { name: "" }, //所属机构
        // workStatus: "", //工作状态
      },
      // name: "", //所属机构
      // 分页
      page: {
        page: 1,
        pageSize: 10,
      },
      currentPage4: 1, //默认第几页
      counts: "", //总条目
    };
  },

  created() {
    this.getMechanism();
    this.getUser();
  },

  methods: {
    // 下拉数据
    async getMechanism() {
      const res = await getList();
      console.log(JSON.parse(res.data));
      this.data = JSON.parse(res.data);
    },
    // 树形
    handleNodeClickOne(data) {
      console.log(data.name);
      this.formObj.agency.name = data.name;
      console.log(this.formObj);
    },
    handleClear() {
      this.name = "";
    },
    // 获取列表
    async getUser() {
      const res = await getUserList(this.page);
      console.log(res.data);
      this.formData = res.data.items;
      this.counts = res.data.counts;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getUser();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.page = val;
      this.getUser();
    },
    // 查找
    async so() {
      console.log("查找");
      const res = await getUserList({
        page: this.page.page,
        pageSize: this.page.pageSize,
        name: this.formObj.name, //快递员姓名
        mobile: this.formObj.mobile, //快递员手机号
        account: this.formObj.account, //快递员账号
        agency: this.formObj.agency.name, //
      });
      console.log(res);
      this.formData = res.data.items;
    },
    // 重置
    reset() {
      this.formObj = {
        account: "", //快递员账号
        name: "", //快递员姓名
        mobile: "", //快递员手机号
        agency: { name: "" }, //所属机构
        // workStatus: "", //工作状态
      };
    },
    // 作业范围分配
    scope(row) {
      console.log(row);
      this.$router.push({
        path: "mapContent",
        query: row,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.gree {
  margin-right: 5px;
  width: 6px;
  height: 6px;
  display: inline-block;
  background-color: green;
  border-radius: 50%;
}
.red {
  margin-right: 5px;
  width: 6px;
  height: 6px;
  display: inline-block;
  background-color: red;
  border-radius: 50%;
}
::v-deep .el-card {
  text-align: left;
  line-height: 24px;
}
</style>
